<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="">
<head>
    <meta charset="UTF-8">
    <title>商品分类管理</title>
    <link href="../../resources/css/common/bootstrap3.min.css" rel="stylesheet" type="text/css" />
    <link href="../../resources/css/common/datetimepicker.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/common/page.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../../resources/css/common/component.css" />
    <link rel="stylesheet" type="text/css" href="../../resources/css/common/Huploadify.css"/>
    <link rel="Bookmark" href="../../resources/img/login/icon.png" >
    <link rel="Shortcut Icon" href="../../resources/img/login/icon.png" />
    <style>
        td {
            vertical-align: middle;
        }
    </style>
</head>
<!--<link rel="import" href="/html/common/common_list.html" >-->
<div class="container body-content">
    <div id="demo">
        <div class="form-inline" style="margin:2% 0">
            <div class="form-group">
                <a class="btn btn-primary btn-sm"  href="#" onclick="showModal()">添加</a>
            </div>
        </div>
        <div class="form-group">
            <table class="table table-bordered table-responsive table-striped">
                <thead>
                <tr>
                    <th v-for="(value, key) in gridColumns" v-cloak>
                            {{ key | capitalize }}
                    </th>
                </tr>
                </thead>
                <tr v-for="entry in gridData"  v-cloak>
                    <td v-for="(value, key) in gridColumns" >
                        <div v-if="key=='status'">
                            <select class="input-sm" @change="changeStatus(entry['id'],entry[key])" v-model="entry[key]">
                                <option value="0" >待上线</option>
                                <option value="1" >上线</option>
                                <option value="-1" >下线</option>
                            </select>
                        </div>
                       <!-- <div v-else-if="key=='oper'">
                            <button type="button" class="btn btn-danger"   @click="showModal()" >添加</button>
                        </div>-->
                        <div v-else-if="key=='banner'" @click="changeBannerPic(event)" v-bind:id="entry['id'] + '_' + entry[key]"  v-html="showHtml(entry[key],value)"></div>
                        <div v-else>
                            <div v-html="showHtml(entry[key],value)"></div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div  class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">添加商品分类</h4>
                    </div>
                    <div class="container">
                        <div class="form-horizontal add-border" >
                            <div class="form-group">
                                <label class="col-sm-3 control-label">分类名称:</label>
                                <div class="col-sm-3">
                                    <input type="text" v-model="title" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">banner图片:</label>
                                <div class="col-sm-3">
                                    <div id="bannerUrlUpload">
                                        <img src="" id="bannerUrl" >
                                        <input type="text" v-model="banner" class="form-control" readonly="readonly">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button"  class="btn btn-default" onclick="addGoodsClassify()">提交</button>
                    </div>
                </div>
            </div>
        </div>
        <div  class="modal fade" id="myBannerModal" tabindex="-1" role="dialog" aria-labelledby="myBannerModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content" style="width: 1170px;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myBannerModalLabel">修改banner图片</h4>
                    </div>
                    <div class="container">
                        <div class="form-horizontal add-border" >
                            <input type="hidden" v-model="bannerId"/>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">banner图片:</label>
                                <div class="col-sm-3">
                                    <div id="bannerPicUrlUpload">
                                        <img src="" id="bannerPicUrl" >
                                        <input type="text" v-model="banner" class="form-control" readonly="readonly">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button"  class="btn btn-default" onclick="updateBannerPic()">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</div>
    <hr />
    <footer>
    </footer>
</div>


<!--<script type="text/x-template" id="page">
    <ul class="pagePagination" >
        <li v-show="current != 1" @click="current&#45;&#45; && goto(current)" ><a href="#">上一页</a></li>
        <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
            <a href="#" >{{index}}</a>
        </li>
        <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="#" >下一页</a></li>
        <li ><input style="width: 50px" v-model="jump" /></li>
        <span class="btn btn-default" @click="jumpTo">&raquo;|</span>
        <li ><a href="javascript:void(0)" style="border: none;">共{{allpage}}页,共{{count}}条</a></li>
    </ul>
</script>-->
<!--<div id="app">
    <page></page>
</div>-->

</body>
<script type="text/javascript" src="../../resources/js/common/jquery-2.1.1.min.js"></script>
<!--
<script src="../../resources/js/common/jquery.uploadify.min.js" type="text/javascript"></script>
-->
<script type="text/javascript" src="../../resources/js/common/jquery.Huploadify.js"></script>
<script src="../../resources/js/common/bootstrap3.min.js" type="text/javascript"></script>
<script src="../../resources/js/common/vue.min.js"></script>
<script src="../../resources/js/common/load_list.js"></script>
<script src="../../resources/js/common/common.js"></script>
<script>
    //默认数据
    var runUrl='/backend/goodsclassify/goodsClassifyList';
    var data={};
    //列表th信息
    //列表th信息
    data['th']={'id':'id', 'title':'分类名称','banner':'banner图','status':'状态','createTime':'创建时间','updateTime':'更新时间'};
    //列表字段信息以及类型  类型 video vioce img a no 五种
    data['gridColumns'] = {'id':'no', 'title':'no','banner':'img','status':'no','createTime':'no','updateTime':'no'};
    data['title']='';
    data['status']=-2;
    data['banner']=''
    data['bannerId']=''
    data['bannerPic']=''
</script>

<script>
    $(function(){
        $('#bannerPicUrlUpload').Huploadify({
            auto:false,
            fileTypeExts:'*.*',
            multi:true,
            formData:{},
            fileSizeLimit:99999999999,
            showUploadedPercent:true,
            showUploadedSize:true,
            removeTimeout:9999999,
//            uploader:'/api/tools/upload_file_for_id',
            uploader:'/backend/api/upload',
            onUploadStart:function(file){
                console.log(file.name+'开始上传');
            },
            onInit:function(obj){
                console.log('初始化');
                console.log(obj);
            },
            onUploadComplete:function(file,data){
                var data_map = jQuery.parseJSON(data);
                if (data_map.status == '1') {
                    var imgUrl = data_map.fileUrl;
                    demo.banner = imgUrl;
                    $('#bannerPicUrl').attr('src', imgUrl);
                } else {
                    alert(data_map.error);
                }
            },
            onCancel:function(file){
                console.log(file.name+'删除成功');
            },
            onClearQueue:function(queueItemCount){
                console.log('有'+queueItemCount+'个文件被删除了');
            },
            onDestroy:function(){
                console.log('destroyed!');
            },
            onSelect:function(file){
                console.log(file.name+'加入上传队列');
            },
            onQueueComplete:function(queueData){
                console.log('队列中的文件全部上传完成',queueData);
            }
        });
        $('#bannerUrlUpload').Huploadify({
            auto:false,
            fileTypeExts:'*.*',
            multi:true,
            formData:{},
            fileSizeLimit:99999,
            showUploadedPercent:true,
            showUploadedSize:true,
            removeTimeout:9999999,
//            uploader:'/api/tools/upload_file_for_id',
            uploader:'/backend/api/upload',
            onUploadStart:function(file){
                console.log(file.name+'开始上传');
            },
            onInit:function(obj){
                console.log('初始化');
                console.log(obj);
            },
            onUploadComplete:function(file,data){
                var data_map = jQuery.parseJSON(data);
                if (data_map.status == '1') {
                    var imgUrl = data_map.fileUrl;
                    demo.banner = imgUrl;
                    $('#bannerUrl').attr('src', imgUrl);
                } else {
                    alert(data_map.error);
                }
            },
            onCancel:function(file){
                console.log(file.name+'删除成功');
            },
            onClearQueue:function(queueItemCount){
                console.log('有'+queueItemCount+'个文件被删除了');
            },
            onDestroy:function(){
                console.log('destroyed!');
            },
            onSelect:function(file){
                console.log(file.name+'加入上传队列');
            },
            onQueueComplete:function(queueData){
                console.log('队列中的文件全部上传完成',queueData);
            }
        });
    })
    function changeStatus(id,value){
        if(confirm('是否修改该状态')){
            var res = executeAjaxByGet('/backend/goodsclassify/modifyGoodsClassify?key=status&value='+value+'&id='+id,'');
            if(res.status==1){
                demo.showPages(vm.$children[0].current);
            }else{
                alert("修改失败!请联系管理员");
                return;
            }
        }
    }

    function showModal(){
        $('#myModal').modal({
            keyboard: true
        });
    }
    function addGoodsClassify(){
        var param = {};
        param['title']=data.title;
        param['banner']=data.banner;
        var flag = executeAjaxByPost('/backend/goodsclassify/saveGoodsClassify',param);
        if(flag.status == 1){
            $("#myModal").modal("hide");
            demo.showPages(vm.$children[0].current);
        }else{
            alert("操作失败，请重试！！！");
        }
    }
    function changeBannerPic(event) {
        var dataTemp = event.currentTarget.id;
        data.bannerId = dataTemp.split("_")[0];
        data.bannerPic = dataTemp.split("_")[1];
        $('#bannerPicUrl').attr('src','')
        $('#bannerPicUrl').attr('src',data.bannerPic);
        $('#myBannerModal').modal({
            keyboard: true
        });
    }
    function updateBannerPic() {
        var banner = data.banner;
        var id = data.bannerId;
        if(banner==''){
            alert("请上传banner图片");
            return;
        }
        var res = executeAjaxByGet('/backend/goodsclassify/modifyGoodsClassify?key=banner'+'&value='+banner+'&id='+id,'');
        if(res.status == 1){
            $("#myBannerModal").modal("hide");
            demo.showPages(vm.$children[0].current);
        }else{
            alert("操作失败，请重试！！！");
        }
    }
</script>
</html>

